iT邦幫忙

2025 iThome 鐵人賽

DAY 5
0
自我挑戰組

我獨自開發 - Supabase 打造全端應用系列 第 5

第五關 - Supabase CLI(下)- 本地資料表建立與雲端同步

  • 分享至 

  • xImage
  •  

封面

在上集中,我們學會了如何安裝、設定 Supabase CLI 以及基本指令的使用。這一集將用最簡單的方式示範如何本地建立資料表、同步到雲端,以及進行資料填充。

1. 開發流程

核心概念

  • 本地開發:在本地建立和測試資料表
  • 遷移管理:使用 SQL 檔案管理資料庫變更
  • 雲端同步:將本地變更推送到雲端
  • 資料填充:在本地和雲端填充測試資料

當我們在本地建立或修改資料表時,會產生對應的 SQL 遷移檔案。這些檔案可以版本化管理,確保團隊協作時的一致性。完成本地測試後,可以將變更推送到雲端,並選擇性地填充測試資料。

開發環境

啟動本地環境:

  • PostgreSQL 資料庫 (port: 54322)
  • API 服務 (port: 54321)
  • Supabase Studio (port: 54323)

2. 建立資料表

步驟 1:建立遷移檔案

supabase migration new create_posts_table

這會在 supabase/migrations/ 目錄建立一個新的 SQL 檔案。

步驟 2:編寫資料表結構

編輯剛建立的遷移檔案:
主要會建立一個 posts 資料表,包含貼文的標題、內容、作者 ID 等欄位。
新增時的作者 ID 會參考 Supabase Auth 的用戶 ID,並啟用 Row Level Security 來控制存取權限。
大量新增時,作者 ID 可以為 NULL,表示未指定作者。

-- 建立貼文資料表
CREATE TABLE posts (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  content TEXT,
  author_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 啟用 Row Level Security
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- 建立基本政策
CREATE POLICY "Anyone can view published posts" ON posts
  FOR SELECT USING (true);

CREATE POLICY "Users can create their own posts" ON posts
  FOR INSERT WITH CHECK (auth.uid() = author_id OR author_id IS NULL);

CREATE POLICY "Users can update their own posts" ON posts
  FOR UPDATE USING (auth.uid() = author_id OR author_id IS NULL);

步驟 3:套用遷移

# 套用新的遷移(不重置整個資料庫)
supabase migration up

驗證資料表

開啟 Supabase Studio 查看:

  1. 前往 http://localhost:54323
  2. 進入 Table Editor
  3. 確認 posts 資料表已建立

管理遷移

# 查看遷移狀態
supabase migration list

3. 資料填充

本地資料填充

建立 supabase/seed.sql 檔案來插入測試資料:

-- supabase/seed.sql

-- 插入測試貼文資料
-- 注意:這裡使用固定的 UUID 作為示範,實際使用時應該是真實的用戶 ID或使用 Null 來表示未指定作者。
INSERT INTO posts (title, content, author_id) VALUES
  ('我的第一篇貼文', '這是我在這個平台上的第一篇貼文,很高興認識大家!', '550e8400-e29b-41d4-a716-446655440000'),
  ('學習 Supabase 心得', 'Supabase 真的很好用,特別是 Row Level Security 的功能讓我印象深刻。', '550e8400-e29b-41d4-a716-446655440001'),
  ('今天的天氣真好', '陽光明媚的一天,適合出去走走。', '550e8400-e29b-41d4-a716-446655440000');

執行資料填充

# 重置資料庫並執行種子資料
supabase db reset --with-seed

雲端資料填充

方法 1:使用 Supabase Studio

  1. 登入 https://app.supabase.com
  2. 選擇您的專案
  3. 進入 SQL Editor
  4. 執行插入資料的 SQL:
INSERT INTO posts (title, content, author_id) VALUES
  ('我的第一篇貼文', '這是我在這個平台上的第一篇貼文,很高興認識大家!', NULL),
  ('學習 Supabase 心得', 'Supabase 真的很好用,特別是 Row Level Security 的功能讓我印象深刻。', NULL),
  ('今天的天氣真好', '陽光明媚的一天,適合出去走走。', NULL);

方法 2:使用 CLI 執行 SQL

連接雲端專案

# 連接到雲端專案
supabase link --project-ref YOUR_PROJECT_ID

同步到雲端

# 推送本地資料庫結構到雲端
supabase db push

# 推送並執行種子資料
supabase db push --include-seed

小結

以上流程可以:

  1. 快速建立本地資料表
  2. 輕鬆同步到雲端
  3. 方便填充測試資料

... to be continued

有任何想討論歡迎留言,或需要指正的地方請鞭大力一點,歡迎訂閱、按讚加分享,分享給想要提升開發效率的朋友


上一篇
第四關 - Supabase CLI(上)- 安裝、設定、指令
系列文
我獨自開發 - Supabase 打造全端應用5
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言